<template>
	<div>
		<div class="breadcrumb">
			<el-button type="text" @click="$router.back()" icon="el-icon-arrow-left" style="font-size: 14px;">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">专家列表</div>
				<div>
					<el-button type="primary" size="mini" class="topButton" round @click="editorExpert">编辑</el-button>
					<el-button type="primary" size="mini" class="topButton" round @click="share">分享</el-button>
					<el-button type="danger" size="mini" class="topButton" round @click="deleteExpert">删除</el-button>
				</div>
			</div>
			<div>
				<ul class="dataUl">
					<li class="dataLi flex" style="justify-content: space-between;">
						<div class="flex" style="justify-content: space-between;">
							<el-image class="liImage" :src="dataLiData.head" fit="cover"></el-image>
							<div>
								<p class="titleName flex">
									<span>{{ dataLiData.expertName }}</span>
									<img v-if="dataLiData.educational" src="@/assets/image/specialist/mz.png" alt="">
									<img v-if="dataLiData.rankName" src="@/assets/image/specialist/nr.png" alt="">
									<img v-if="dataLiData.fieldRelation" src="@/assets/image/specialist/sj.png" alt="">
								</p>
								<p class="msgList">
									教育背景：{{ dataLiData.educational?dataLiData.educational:'暂无' }}
									<el-image class="cbp_tmlabelLiimg"  
										v-if="educationIsShow && educationImageList.length > 0" 
										:src="require('@/assets/image/specialist/lookImage.png')" alt="" 
										:preview-src-list="educationImageList">
									</el-image>
								</p>
								<p class="msgList">
									职称/职务：{{ dataLiData.rankName?dataLiData.rankName:'暂无' }}
									<el-image class="cbp_tmlabelLiimg"
										v-if="postIsShow && postImageList.length > 0" 
										:src="require('@/assets/image/specialist/lookImage.png')" alt="" 
										:preview-src-list="postImageList">
									</el-image>
								</p>
								<p class="msgList">擅长领域：{{ dataLiData.fieldRelation?dataLiData.fieldRelation:'暂无' }}</p>
							</div>
						</div>
						<!-- <el-button type="primary" @click="lookDetails()">查看详情</el-button> -->
					</li>
				</ul>
			</div>
			<el-scrollbar wrap-class="scrollbar-wrapper" style="width: 100%;">
				<div class="listTitleItemBox">
					<div class="listTitleBox" v-for="(item, index) in listTitle" :key="index" :class="listTitleIndex == index?'listTitleBoxActive':''"
					 @click="navTitles(index)">
						<span>{{item}}</span>
					</div>
				</div>
			</el-scrollbar>
			<div>
				<!-- 专家简介 -->
				<synopsis v-if="listTitleIndex == 0" :synopsisData="pageData"></synopsis>
				<noData v-else></noData>
				<!-- 学员列表 -->
				<!-- <studentList v-show="listTitleIndex == 1"></studentList> -->
				<!-- 课程安排 -->
				<!-- <curriculum v-show="listTitleIndex == 2"></curriculum> -->
			</div>
		</div>
	</div>
</template>

<script>
	import synopsis from './components/synopsis.vue'
	// import studentList from './components/studentList.vue'
	// import curriculum from './components/curriculum.vue'
	export default {
		components: {
			synopsis,
			// studentList,
			// curriculum
		},
		data() {
			return {
				rateValue: 3.7,
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				listTitle: ['专家简介', '专栏', '文章', '视频', '互动', '动态'],
				listTitleIndex: 0,
				pageData: '',
				dataLiData: '',
				// 头部图片展示
				// 教育背景
				educationImageList: [],
				educationIsShow: false,
				// 职称等级
				postImageList: [],
				postIsShow: false
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 11)
			// console.log(this.$route.params.id)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id

			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId

			this.getPageData(this.$route.params.id)
		},
		watch: {


		},
		methods: {
			paginaClick(val) {

			},
			navTitles(i) {
				this.listTitleIndex = i
			},
			getPageData(id) {
				// 获取专家详情
				this.$request.postForm(this.$api.queryExpertDetails, {
					expertId: id
				}).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						this.dataLiData = this.pageData.basicInformation[0]
						// 教育背景
						if(this.pageData.educational.length > 0){
							this.pageData.educational.forEach((v)=>{
								if(v.isOpen == '1' && v.image){
									this.educationImageList.push(v.image)
								}
							})
							setTimeout(()=>{
								if(this.educationImageList.length > 0){
									this.educationIsShow = true
								} else {
									this.educationIsShow = false
								}
							},300)
						}
						// 职称等级rankName
						if(this.pageData.rankName.length > 0){
							this.pageData.rankName.forEach((v)=>{
								if(v.isOpen == '1' && v.rankPicture){
									this.postImageList.push(v.rankPicture)
								}
							})
							setTimeout(()=>{
								if(this.postImageList.length > 0){
									this.postIsShow = true
								} else {
									this.postIsShow = false
								}
							},300)
						}
					}
				})
			},
			deleteExpert() {
				// 删除专家
				this.$confirm('确定要删除该专家吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deleteExpert, {
						expertId: this.$route.params.id
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							this.$router.back()
						}
					})
				})

			},
			editorExpert(){
				sessionStorage.setItem('newExpert', '0')
				this.$router.push(`/entrance/teammanagement/addspecialist?id=${this.$route.params.id}`)
			},
			share() {
				// 分享
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', document.location.href);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$message.success('链接复制成功，请分享')
				}
				document.body.removeChild(input);
			},
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		/* margin-bottom: 20px; */
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.dataUl,
	.dataLi {
		width: 100%;
	}

	.dataLi {
		padding: 20px;
		background: #FFFFFF;
		/* border-bottom: 1px solid #EEEEEE; */
		align-items: center;
	}

	.dataIsActive {
		background: #FAFAFA;
	}

	.liImage {
		width: 120px;
		height: 120px;
		margin-right: 30px;
	}

	.el-button--small {
		height: 36px;
		width: 110px;
	}

	.titleName {
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 20px;
		align-items: center;
	}

	.titleName span {
		margin-right: 35px;
	}

	.titleName img {
		margin-right: 10px;
		width: 16px;
		height: 16px;
	}

	.msgList {
		color: #454545;
		font-size: 12px;
		line-height: 22px;
		width: 550px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.listTitleItemBox {
		min-width: 100%;
		background: #F3F3F3;
		/* display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap; */
		border-bottom: 1px solid #23B14D;
		white-space: nowrap;
	}
.cbp_tmlabelLiimg {
		margin-left: 20px;
		width: 12px;
		height: 12px;
		cursor: pointer;
	}
	.listTitleBox {
		width: 140px;
		color: #333333;
		height: 40px;
		text-align: center;
		line-height: 40px;
		display: inline-block;
	}

	.listTitleBox span {
		cursor: pointer;
	}

	.listTitleBoxActive {
		background: #23B14D;
		color: #FFFFFF;
	}
</style>
